<template>
	<view>
		<view class="coupon">
			<view class="main-box">
				<scroll-view scroll-y="true" class="scroll-box z-padding-32">
					<block v-for="(item, index) in list">
						<coupon :info="item" :type="1" @couponTap="couponTap"></coupon>
					</block>
					<!-- <van-empty description="暂无优惠券" v-if="{{finish && list.length === 0}}" /> -->
				</scroll-view>
			</view>
			<view class="btnBox z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="z-btn" @tap="code">口令优惠券</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from "../../utils/http"
import coupon from "@/component/coupon.vue"
export default {
	components:{
		coupon
	},
	data() {
		return {
			safeBottom: `30px`,
			list: [],
			finish: false,
			loading: false,
			page: 1
		};
	},
	onLoad() {
		 this.reload()
	},
	methods: {
		code(){
		    uni.navigateTo({
		      url: '/service/code/code',
		    })
		  },
		  couponTap(e){
			  console.log(e,'??')
		    if(e.type == 1){
		      http.get('coupon/receive', {
		        type: 0,
		        coupon_id: e.info.id
		      }).then(res => {
		        util.toast(res.msg)
		        this.reload()
		      })
		    }else if(e.type == 2){
		      uni.switchTab({
		        url: '/pages/index/index'
		      })
		    }
		    
		  },
		  reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		  },
		  more(){
		    this.page = ++this.page
		    this.getList()
		  },
		  getList(){
		    if(this.finish){
		      return 
		    }
		    if(this.loading){
		      return 
		    }
		    this.loading = true
		    http.get('coupon/getlist', {
		      page: this.page,
		    }).then(res => {
		      if(res.data.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data)
		     this.list = arr
		      
		    }).finally(res => {
		      this.loading = false
		    })
		  },
	}
};
</script>

<style lang="scss">
	page {
		background: #EDF1F4;
	}
.coupon {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
	box-sizing: border-box;
}

.btnBox {
	flex-shrink: 0;
	background: #fff;
}

.z-btn {
	background-color: $uni-mainmoneycolor;
}
</style>
